<template>
  <div class="Order">
        <span class="toBack" @click="toBack">&lt;</span>
        <h2>确认下单</h2>
        <div class="Order_address-box" @click="addressBoxShow">
            <p>
                请选择服务地址
                <van-popup
            v-model="show"
            position="bottom"
            :style="{ height: '100%' }"
          >
            <van-address-edit
              :area-list="areaList"
              show-delete
              show-set-default
              show-search-result
              show-area
              :search-result="searchResult"
              :area-columns-placeholder="['请选择', '请选择', '请选择']"
              @save="onSave"
              @delete="onDelete"
            />
          </van-popup>
            </p>
          
            <span>&gt;</span>
        </div>
        <div class="Order_info-box">
            <div class="info_header-box">
                <ul>
                    <li>
                        <span class="fa fa-chevron-circle-down"></span>
                        每日测温
                    </li>
                    <li>
                        <span class="fa fa-chevron-circle-down"></span>
                        工具消毒
                    </li>
                    <li>
                        <span class="fa fa-chevron-circle-down"></span>
                        急速上门
                    </li>
                    <li>
                        <span class="fa fa-chevron-circle-down"></span>
                        慢必赔
                    </li>
                </ul>
            </div>

            <div class="info_main-box">
                <ul>
                    <li>
                        <img :src="this.imgSRC" alt="">
                        <h3>{{this.serviceName}}</h3>
                        <span class="toDesc">去详情 &gt;</span>
                        <p>规格：<span>日常保洁 1小时</span></p>
                        <p>￥ {{priceInfo}}/1小时</p>
                        <button class="fa fa-minus"></button>
                        <input type="number" value="1" min="1">
                        <button class="fa fa-plus"></button>
                    </li>
                </ul>
            </div>

            <div class="info_footer-box">
                <ul>
                    <li>
                        <p class="pName">请选择服务</p>
                        <p class="pSelect">日常保洁1小时</p>
                        <i>&gt;</i>
                    </li>
                    <li>
                        <!--结束时间-->
                    <van-cell is-link title="上门时间" :value="value2" @click="showPopup2"/>
                    <van-popup v-model="show2" position="bottom" :style="{ height: '50%' }">
                        <van-datetime-picker
                                @confirm="confirm2"
                                @cancel="cancel2"
                                v-model="currentDate2"
                                type="datetime"
                                title="选择时间"
                        >
                        </van-datetime-picker>
                    </van-popup>
                    </li>
                    <li>
                        <p class="pName">备注</p>
                        <p class="pSelect">请填写特别的备注</p>
                        <i>&gt;</i>
                    </li>
                </ul>
            </div>
        </div>

        <div class="pay-box">
            <ul>
                <li>
                    <p>优惠券</p>
                    <i>&gt;</i>
                </li>
                <li>
                    <p>支付方式</p>
                    <p>微信支付</p>
                    <i>&gt;</i>
                </li>
            </ul>
        </div>

        <div class="statement-box">
            该服务由平台直选商家提供
        </div>

        <div class="buy_footer-box">
            <ul>
                <li>
                    <p>合计:￥ <span>{{priceInfo}}.00</span></p>
                    <p>共计优惠:￥ <span>0.00</span></p>
                    <p>明细<span class="fa fa-chevron-down"></span></p>
                    <button>立即购买</button>
                </li>
            </ul>
        </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { areaList } from '@vant/area-data';
const _ = require("lodash");
import axios from "../request";
import { mapState } from 'vuex'
var img;
// ! 获取url中的id
const params = new URLSearchParams(location.search)
var id = Number(params.get('id'))
console.log(id);
var listArr = [];
export default {
    name:"HomeCleaning",
    data() {
            return {
           		value2: '请选择时间',//结束时间显示
           		show2: false,//弹出框是否显示
                minDate2: new Date(),//结束时间
                maxDate2: new Date(2035, 10, 1),//结束时间
                currentDate2: new Date(),//结束时间
                areaList,
                searchResult: [],
                show:false,
                sum:"",
                imgSRC:img,
                serviceName:name,
                priceInfo:listArr[0].price,
            }
        },
        computed:{
            ...mapState("servelist",["sonlist","imglist"]),
        },
        created(){
            // ~ 图片
            // console.log(this.$route.query.fatherid) // √
            // console.log(this.imglist);
                this.imglist.map((v,i)=>{
                    // console.log(this.$route.query.fatherid);
                    if(i === this.$route.query.fatherid - 1){
                        // console.log(v.img);
                        img =  v.img
                    }
                })
            console.log(img);

            // ~ 
            // console.log(this.$route.params.id);
            axios.get('/api/sys/myService/search').then(res=>{
                console.log(res.data.data);
                listArr = res.data.data.filter((item)=>item.id + 7 === id);
                console.log(listArr[0]);
                console.log(listArr[0].price);
                name = listArr[0].serviceName;
                // console.log(id);
            })
        },
        methods: {
            //结束时间确定
            confirm2() {
                this.show2 = false//弹出框隐藏
                //拼接显示时间 年月日时分秒,toString().padStart(2, "0")这个是将1:1:0显示为01:01:00
                this.value2 = this.currentDate2.getFullYear() + '-'
                    + (this.currentDate2.getMonth() + 1).toString().padStart(2, "0") + '-'
                    + this.currentDate2.getDate() + ' '
                    + this.currentDate2.getHours().toString().padStart(2, "0") + ':'
                    + this.currentDate2.getMinutes().toString().padStart(2, "0") + ':'
                    + this.currentDate2.getSeconds().toString().padStart(2, "0")
            },
            //结束时间取消
            cancel2() {
                this.show2 = false;//弹出框隐藏
            },
            //结束时间弹出层
            showPopup2() {
                this.show2 = true;//弹出框显示
            },
            onSave() {
                console.log(this);
            // this.show = false
            Toast('保存成功');
            },
            onDelete() {
            Toast('delete');
            this.show = false
            },
            // onChangeDetail(val) {
            // if (val) {
            //     this.searchResult = [
            //     {
            //         name: '黄龙万科中心',
            //         address: '杭州市西湖区',
            //     },
            //     ];
            // } else {
            //     this.searchResult = [];
            // }
            // },
            addressBoxShow(){
                this.show = true
            },
            // ! 返回上一页
            toBack(){
                this.$router.back()
            },
       }
}
</script>

<style lang="scss" scoped>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .Order{
        position: relative;
        width: 3.75rem;
        height: 3.98rem;
        background: linear-gradient(180deg, #1FCCB6 0%, #F4F4F4 100%);
        box-sizing: border-box;
        padding: .1rem .145rem;

        & h2{
            width: .72rem;
            height: .25rem;
            font-size: .18rem;
            font-weight: 600;
            color: #FFFFFF;
            line-height: .25rem;
            margin: auto;
        }

        & .toBack{
            position: absolute;
            left: .2rem;
            top: .17rem;
            font-size: .18rem;
            line-height: .1rem;
            width: .11rem;
            height: .11rem;
            color: #FFFFFF;
        }

        & .Order_address-box{
            position: relative;
            box-sizing: border-box;
            width: 100%;
            height: .66rem;
            background-color: #FFFFFF;
            margin-top: .19rem;
            border-radius: .11rem;
            font-size: .2rem;
            line-height: .66rem;
            padding: 0 .16rem;
            margin-bottom: .1rem;

            & span{
                color: #000;
                position: absolute;
                left: 3.1rem;
                top: 0rem;
            }
        }

        & .Order_info-box{
            width: 100%;
            height: 2.9rem;
            background-color: #fff;
            border-radius: .11rem;
            overflow: hidden;

            & .info_header-box{
                width:100%;
                height: .39rem;
                background-color: #B3E8E1;
                font-size: .12rem;

                & ul{
                    display: flex;
                    justify-content: space-around;

                    & li{
                        line-height: .39rem;
                        color: #fff;
                    }
                }
            }

            & .info_main-box{
                width: 100%;
                height: calc(100% - 1.89rem);
                // background-color: blueviolet;

                & ul{
                    box-sizing: border-box;
                    padding: .15rem;

                    & li{
                        position: relative;
                        width: 100%;
                        background-color: red;

                        & img{
                            position: absolute;
                            width: .68rem;
                            height: .62rem;
                        }

                        & h3{
                            position: absolute;
                            top: 0;
                            left: .8rem;
                            font-size: .16rem;
                        }

                        & .toDesc{
                            position: absolute;
                            right: -.15rem;
                            font-size: .11rem;
                            width: .55rem;
                            height: .22rem;
                            line-height: .22rem;
                            background: #B3E8E1;
                            border-radius: .1rem 0 0 .1rem;
                            padding-left: .1rem;
                            color: #36A798;
                        }

                        & p:nth-child(4){
                            position: absolute;
                            top: .4rem;
                            left: .8rem;
                            font-size: .12rem;
                            color: #999;
                        }

                        & p:nth-child(4) span{
                            color: #000;
                        }

                        & p:nth-child(5){
                            position: absolute;
                            top: .75rem;
                            left: .8rem;
                            font-size: .14rem;
                            color: red;
                        }

                        & input,button{
                            position: absolute;
                            width: .28rem;
                            height: .28rem;
                            font-size: .16rem;
                            background-color: #F3F4F6 ;
                            border: none;
                        }

                        & button:nth-child(6){
                            left: 2.32rem;
                            top: .67rem;
                        }

                        & input{
                            left: 2.6rem;
                            top: .67rem;
                            border: none;
                            text-align: center;
                        }

                        & button:nth-child(8){
                            left: 2.88rem;
                            top: .67rem;
                        }
                    }
                }
            }

            & .info_footer-box{
                width: 100%;
                height: 1.5rem;
                background-color: #fff;

                & ul{
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    padding: .15rem;

                    & li{
                        display: flex;
                        justify-content: space-between;
                        font-size: .14rem;
                        line-height: .4rem;

                        & .pName{
                            flex: 1.5;
                            float: left;
                        }

                        & .pSelect{
                            flex: 2;
                            float: left;
                        }

                        & p:nth-child(2){
                            color: #00AD98;
                            }

                        & i{
                            flex: .1;
                        }
                    }

                    & li:nth-child(3) p{
                        color: #000;
                    }
                }
            }
        }

        & .pay-box{
            width: 100%;
            height: .8rem;
            background-color: #fff;
            border-radius: .11rem;
            margin-top: .05rem;

            & ul{
                box-sizing: border-box;
                padding:0 .15rem;
                display: flex;
                flex-direction: column;

                & li{
                    font-size: .14rem;
                    display: flex;
                    justify-content: space-between;
                    font-size: .14rem;
                    line-height: .4rem;
                }

                & li:nth-child(2) p:nth-child(2){
                    margin-left: 1.7rem;
                }
            }
        }

        & .statement-box{
            box-sizing: border-box;
            font-size: .14rem;
            width: 100%;
            height: .5rem;
            background-color: #fff;
            margin-top: .05rem;
            border-radius: .11rem;
            padding:0 .15rem;
            line-height: .5rem;
            margin-bottom: .5rem;
        }

        & .buy_footer-box{
            box-sizing: border-box;
            padding-left:.15rem ;
            width: 100%;
            height: .44rem;

            & ul{

                & li{
                    position: relative;

                    & p,button{
                        position: absolute;
                    }

                    & p:nth-child(1){
                        font-size: .14rem;
                    }

                    & p:nth-child(1) span{
                        left: .63rem;
                        color: red;
                        font-size: .24rem;
                    }

                    & p:nth-child(2){
                        font-size: .12rem;
                        top: .27rem;
                        color: #E13940 ;
                    }

                    & p:nth-child(3){
                        left: 1.6rem;
                        top: .05rem;
                        font-size: .12rem;
                        color: #F41C37 ;
                    }

                    & button{
                        width: 1.3rem;
                        height: .44rem;
                        background-color: #00D2BB;
                        border: none;
                        border-radius: .22rem;
                        color: #fff;
                        right: 0;
                        font-size: .14rem;
                    }
                }
            }
        }
    }
</style>